<!DOCTYPE HTML>
<html lang="zh-CN" data-rem="375">
<head>
    <meta charset="UTF-8">
    <title>tmt-workflow Demo</title>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="apple-mobile-web-app-capable" content="no" />
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" href="../css/style-index.css" />
    <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','https://o4jiepyc4.qnssl.com/analytics.js','ga');
        // 使用七牛 CDN 进行 GA 加速：https://o4jiepyc4.qnssl.com/analytics.js <- https://www.google-analytics.com/analytics.js

        ga('create', 'UA-24431632-5', 'auto');
        ga('send', 'pageview');

    </script>
</head>
<body>

<div class="mod-header">
    <div class="mod-header__logo">WeFlow Logo</div>
    <a class="mod-header__title" href="https://github.com/weixin/tmt-workflow">tmt-workflow Demo</a>
    <div class="mod-header__desc">执行 开发(dev)/编译(dist) 任务后 [查看源码]</div>
</div>

<div class="mod-example">
    <div class="mod-example__title">雪碧图合并 (支持多组)</div>
    <div class="mod-example__preview">
        <div class="mod-discovery">
            <div class="mod-discovery__list">
                <i class="mod-discovery__icon mod-discovery__icon_moment"></i>
                <i class="mod-discovery__icon mod-discovery__icon_qrcode"></i>
                <i class="mod-discovery__icon mod-discovery__icon_shake"></i>
                <i class="mod-discovery__icon mod-discovery__icon_locaitonservice"></i>
                <i class="mod-discovery__icon mod-discovery__icon_bottle"></i>
                <i class="mod-discovery__icon mod-discovery__icon_jd"></i>
                <i class="mod-discovery__icon mod-discovery__icon-game"></i>
            </div>
        </div>
    </div>

    <div class="mod-example__preview">
        <div class="mod-social-media">
            <div class="mod-social-media__list">
                <i class="mod-social-media__icon mod-social-media__icon_share"></i>
                <i class="mod-social-media__icon mod-social-media__icon_moment"></i>
                <i class="mod-social-media__icon mod-social-media__icon_favadd"></i>
                <i class="mod-social-media__icon mod-social-media__icon_copy"></i>
                <i class="mod-social-media__icon mod-social-media__icon_refresh"></i>
            </div>
        </div>
    </div>
    
</div>

<div class="mod-example">
    <div class="mod-example__title">普通图片调用</div>
    <div class="mod-example__preview">
        <div class="mod-sticker">
            <div class="mod-sticker__list">
                <img class="mod-sticker__icon" src="../img/mod-sticker/1.gif"></img>
                <img class="mod-sticker__icon" src="../img/mod-sticker/2.gif"></img>
                <i class="mod-sticker__icon mod-sticker__icon_3"></i>
                <i class="mod-sticker__icon mod-sticker__icon_4"></i>
            </div>
        </div>
    </div>
</div>

<div class="mod-example">
    <div class="mod-example__title">SVG调用 - 作为背景图</div>
    <div class="mod-example__preview">
        <div class="mod-sticker">
            <div class="mod-sticker__list">
                <div class="mod-social-media mod-svg__background-icon"></div>
            </div>
        </div>
    </div>
</div>

<div class="mod-example">
    <div class="mod-example__title">SVG调用 - 在HTML使用</div>
    <div class="mod-example__preview">
        <div class="mod-sticker">
            <div class="mod-sticker__list-border">
                <div>HTML直接引用</div>
                <img src="../svg/svgicon/ts.svg" alt="">
            </div>
            <div class="mod-sticker__list-border">
                <div>内联到HTML 动画需求</div>
                <div class="mod-header__desc">在src中链接的最后加?i</div>
                <img id="svg4" class="cas3" src="../svg/svgicon/translate.svg?i" alt="">
            </div>
            <div class="mod-sticker__list-border">
                <div>合并SYMBOL   <button id="svgToggleColor" class="mod-example__svg-button">换色</button>需求</div>
                <div class="mod-header__desc">在src中链接的最后加?s</div>
                <img id="svg5" class="mod-example__svg-red" src="../svg/svgicon/4g.svg?s" alt="">
                <img id="svg6" class="mod-example__svg-red" src="../svg/svgicon/12w.svg?s" alt="">
                <img id="svg7" class="mod-example__svg-red" src="../svg/svgicon/bl.svg?s" alt="">
                <img id="svg8" class="mod-example__svg-red" src="../svg/svgicon/ss.svg?s" alt="">
            </div>
        </div>
    </div>
</div>



<div class="mod-footer">
    <!--以下为 EJS 模板语言使用范例-->
    <% var text = "点击查看更多源码说明" %>
    <a href="https://weflow.io/demo/html/doc.html" class="mod-footer__link"><%-text %></a>
</div>

<!--音乐等媒体文件使用范例-->
<audio src="../media/bgm.mp3" loop id="musicBGM"></audio>

<!--以下为 js 代码压缩指令格式范例-->
<!-- build:js ../js/build.js -->
<script type="text/javascript" src="../js/lib/prism.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
<!-- endbuild -->

<script type="text/javascript" src="https://pingjs.qq.com/h5/stats.js" name="MTAH5" sid="500140624" ></script>
<script type="text/javascript">
    var ys = 0;
    document.getElementById('svgToggleColor').onclick = function(){
        function togglecolor(id){
            if(!(ys%2)){
                document.getElementById(id).className.baseVal = 'mod-example__svg-red';
                document.getElementById(id).className.animVal = 'mod-example__svg-red';
            }else{
                document.getElementById(id).className.baseVal = 'mod-example__svg-blue';
                document.getElementById(id).className.animVal = 'mod-example__svg-blue';
            }
        }
        ys++;

        togglecolor('svg5');
        togglecolor('svg6');
        togglecolor('svg7');
        togglecolor('svg8');
    }
    window.onload = function(){
        var tral = 0;
        setInterval(function(){
            tral = tral + 2;
            if(tral == 30){tral = 0;}
            document.querySelector('[data-id="t1"]').style.transform = 'translate('+ tral +'px,0)';
            document.querySelector('[data-id="t2"]').style.transform = 'translate('+ (-tral) +'px,0)';
        },10)
        
    }
</script>
</body>
</html>